<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 登录</title>
    <link rel="stylesheet" th:href="@{/static/element-plus/index.css}">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .login-box {
            width: 400px;
            padding: 30px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .login-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            color: #333;
        }

        .login-footer {
            margin-top: 20px;
            text-align: center;
            color: #999;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-container">
        <div class="login-box">
            <div class="login-title">后台管理系统</div>
            <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%;" @click="submitForm" :loading="loading">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

<script th:src="@{/static/js/vue.global.js}"></script>
<script th:src="@{/static/element-plus/index.full.js}"></script>
<script th:src="@{/static/element-plus/zh-cn.js}"></script>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/app.js}"></script>
<script>
    const { ref } = Vue;

    const loginAppOptions = {
        setup() {
            const loginForm = ref({
                username: '',
                password: ''
            });

            const loading = ref(false);

            const rules = {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]};

            const submitForm = () => {
                loading.value = true;

                axios.post('/login', loginForm.value)
                    .then(response => {
                        localStorage.setItem('token', response.token);
                        window.location.href = '/index';
                    })
                    .catch(error => {
                        sharedMethods.showMessage('error', '登录失败: ' + (error.response?.data?.message || error.message));
                    })
                    .finally(() => {
                        loading.value = false;
                    });
            };

            return {
                loginForm,
                loading,
                submitForm
            };
        }
    };

    initVueApp('#app', loginAppOptions);
</script>
</body>
</html>